<template>
    <div class="toolbar toolbar-wrap">
        <div class="content"></div>
        <div class="but list"></div>
        <div class="toolist">
            <div class="pull">
                <i class="tab-ico vip"></i>
                <em class="tab-text">商品会员</em>
            </div>
            <div class="pull">
                <i class="tab-ico cart"></i>
                <em class="tab-text">购物车</em>
            </div>
            <div class="pull">
                <i class="tab-ico follow"></i>
                <em class="tab-text">我的关注</em>
            </div>
            <div class="pull">
                <i class="tab-ico history"></i>
                <em class="tab-text">我的足迹</em>
            </div>
            <div class="pull">
                <i class="tab-ico message"></i>
                <em class="tab-text">我的消息</em>
            </div>
            <div class="pull">
                <i class="tab-ico jimi"></i>
                <em class="tab-text">咨询</em>
            </div>
        </div>
        <div class="back pull">
            <i class="tab-ico top"></i>
            <em class="tab-text">顶部</em>
        </div>
    </div>
    <!-- 主要内容区域 -->
    <section class="con">
        <!-- 导航路径区域 -->
        <div class="conPoin">
            <div class="conPoin">
                <a
                    href="###"
                    v-for="item, index in categoryView"
                    :key="index"
                    v-show="typeof item === 'string'"
                >{{ item }}</a>
            </div>
        </div>
        <!-- 主要内容区域 -->
        <div class="mainCon">
            <!-- 左侧放大镜区域 -->

            <div class="previewWrap">
                <!--放大镜效果-->
                <div class="spec-preview" @mousemove="mouseZoom($event)">
                    <img :src="skuInfo.skuDefaultImg" />
                    <div class="event"></div>
                    <div class="big">
                        <img :src="skuInfo.skuDefaultImg" id="big" />
                    </div>
                    <div class="mask" ref="Mask" id="Greentevent"></div>
                </div>
                <!--下方的缩略图-->
                <div class="specScroll">
                    <!-- 中间可滑动区域 -->
                    <div class="items">
                        <div class="itemsCon">
                            <Carousel
                                sumHeight="56px"
                                :imgData="skuInfo.skuImageList"
                                @callBack="setBigImgUrl"
                            />
                        </div>
                    </div>
                </div>
            </div>
            <!-- 右侧选择区域布局 -->
            <div class="InfoWrap">
                <div class="goodsDetail">
                    <h3 class="InfoName">{{ skuInfo.skuDesc }}</h3>
                    <p class="news">推荐选择下方[移动优惠购],手机套餐齐搞定,不用换号,每月还有花费返</p>
                    <div class="priceArea">
                        <div class="priceArea1">
                            <div class="title">价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</div>
                            <div class="price">
                                <i>¥</i>
                                <em>{{ skuInfo.price }}</em>
                                <span>降价通知</span>
                            </div>
                            <div class="remark">
                                <i>累计评价</i>
                                <em>65545</em>
                            </div>
                        </div>
                        <div class="priceArea2">
                            <div class="title">
                                <i>促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</i>
                            </div>
                            <div class="fixWidth">
                                <i class="red-bg">加价购</i>
                                <em
                                    class="t-gray"
                                >满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品</em>
                            </div>
                        </div>
                    </div>
                    <div class="support">
                        <div class="supportArea">
                            <div class="title">支&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;持</div>
                            <div class="fixWidth">以旧换新，闲置手机回收 4G套餐超值抢 礼品购</div>
                        </div>
                        <div class="supportArea">
                            <div class="title">配 送 至</div>
                            <div class="fixWidth">广东省 深圳市 宝安区</div>
                        </div>
                    </div>
                </div>

                <div class="choose">
                    <div class="chooseArea">
                        <div class="choosed"></div>
                        <dl v-for="item, index in spuSaleAttrList" :key="item.id">
                            <dt class="title">{{ item.saleAttrName }}</dt>
                            <dd
                                changepirce="0"
                                v-for="doubleItem, MiniIndex in item.spuSaleAttrValueList"
                                :key="doubleItem.id"
                                @click="filterAttr(doubleItem.saleAttrValueName, index, MiniIndex)"
                                :class="{ 'isCheckedNow': doubleItem.isChecked == '1' }"
                            >{{ doubleItem.saleAttrValueName }}</dd>
                        </dl>
                    </div>

                    <div class="cartWrap">
                        <div class="controls">
                            <input autocomplete="off" v-model="attrNum" class="itxt" />
                            <a href="###" class="plus" @click.prevent="upAttrNum(true)">+</a>
                            <a href="###" class="mins" @click.prevent="upAttrNum(false)">-</a>
                        </div>
                        <div class="add">
                            <a href="###" target="_blank" @click.prevent="getPushAttr">加入购物车</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 内容详情页 -->
    <section class="productDetail">
        <aside class="aside">
            <div class="tabWraped">
                <h4 class="active">相关分类</h4>
                <h4>推荐品牌</h4>
            </div>
            <div class="tabContent">
                <div class="tab-pane active">
                    <ul class="partList">
                        <li>手机</li>
                        <li>手机壳</li>
                        <li>内存卡</li>
                        <li>Iphone配件</li>
                        <li>贴膜</li>
                        <li>手机耳机</li>
                        <li>移动电源</li>
                        <li>平板电脑</li>
                    </ul>
                    <ul class="goodsList">
                        <li>
                            <div class="list-wrap">
                                <div class="p-img">
                                    <img src="@/assets/ShopCarAbout/part01.png" />
                                </div>
                                <div class="attr">Apple苹果iPhone 6s (A1699)</div>
                                <div class="price">
                                    <em>¥</em>
                                    <i>6088.00</i>
                                </div>
                                <div class="operate">
                                    <a href="javascript:void(0);">加入购物车</a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="list-wrap">
                                <div class="p-img">
                                    <img src="@/assets/ShopCarAbout/part02.png" />
                                </div>
                                <div class="attr">
                                    <em>Apple苹果iPhone 6s (A1699)</em>
                                </div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>6088.00</i>
                                    </strong>
                                </div>
                                <div class="operate">
                                    <a href="javascript:void(0);">加入购物车</a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="list-wrap">
                                <div class="p-img">
                                    <img src="@/assets/ShopCarAbout/part03.png" />
                                </div>
                                <div class="attr">
                                    <em>Apple苹果iPhone 6s (A1699)</em>
                                </div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>6088.00</i>
                                    </strong>
                                </div>
                                <div class="operate">
                                    <a href="javascript:void(0);">加入购物车</a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="list-wrap">
                                <div class="p-img">
                                    <img src="@/assets/ShopCarAbout/part02.png" />
                                </div>
                                <div class="attr">
                                    <em>Apple苹果iPhone 6s (A1699)</em>
                                </div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>6088.00</i>
                                    </strong>
                                </div>
                                <div class="operate">
                                    <a href="javascript:void(0);">加入购物车</a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="list-wrap">
                                <div class="p-img">
                                    <img src="@/assets/ShopCarAbout/part03.png" />
                                </div>
                                <div class="attr">
                                    <em>Apple苹果iPhone 6s (A1699)</em>
                                </div>
                                <div class="price">
                                    <strong>
                                        <em>¥</em>
                                        <i>6088.00</i>
                                    </strong>
                                </div>
                                <div class="operate">
                                    <a href="javascript:void(0);">加入购物车</a>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="tab-pane">
                    <p>推荐品牌</p>
                </div>
            </div>
        </aside>
        <div class="detail">
            <div class="fitting">
                <h4 class="kt">选择搭配</h4>
                <div class="good-suits">
                    <div class="master">
                        <img src="@/assets/ShopCarAbout/l-m01.png" />
                        <p>￥5299</p>
                        <i>+</i>
                    </div>
                    <ul class="suits">
                        <li class="suitsItem">
                            <img src="@/assets/ShopCarAbout/dp01.png" />
                            <p>Feless费勒斯VR</p>
                            <label>
                                <input type="checkbox" value="39" />
                                <span>39</span>
                            </label>
                        </li>
                        <li class="suitsItem">
                            <img src="@/assets/ShopCarAbout/dp02.png" />
                            <p>Feless费勒斯VR</p>
                            <label>
                                <input type="checkbox" value="50" />
                                <span>50</span>
                            </label>
                        </li>
                        <li class="suitsItem">
                            <img src="@/assets/ShopCarAbout/dp03.png" />
                            <p>Feless费勒斯VR</p>
                            <label>
                                <input type="checkbox" value="59" />
                                <span>59</span>
                            </label>
                        </li>
                        <li class="suitsItem">
                            <img src="@/assets/ShopCarAbout/dp04.png" />
                            <p>Feless费勒斯VR</p>
                            <label>
                                <input type="checkbox" value="99" />
                                <span>99</span>
                            </label>
                        </li>
                    </ul>
                    <div class="result">
                        <div class="num">已选购0件商品</div>
                        <div class="price-tit">套餐价</div>
                        <div class="price">￥5299</div>
                        <button class="addshopcar">加入购物车</button>
                    </div>
                </div>
            </div>
            <div class="intro">
                <ul class="tab-wraped">
                    <li class="active">
                        <a href="###">商品介绍</a>
                    </li>
                    <li>
                        <a href="###">规格与包装</a>
                    </li>
                    <li>
                        <a href="###">售后保障</a>
                    </li>
                    <li>
                        <a href="###">商品评价</a>
                    </li>
                    <li>
                        <a href="###">手机社区</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div id="one" class="tab-pane active">
                        <ul class="goods-intro">
                            <li>分辨率：1920*1080(FHD)</li>
                            <li>后置摄像头：1200万像素</li>
                            <li>前置摄像头：500万像素</li>
                            <li>核 数：其他</li>
                            <li>频 率：以官网信息为准</li>
                            <li>品牌： Apple</li>
                            <li>商品名称：APPLEiPhone 6s Plus</li>
                            <li>商品编号：1861098</li>
                            <li>商品毛重：0.51kg</li>
                            <li>商品产地：中国大陆</li>
                            <li>热点：指纹识别，Apple Pay，金属机身，拍照神器</li>
                            <li>系统：苹果（IOS）</li>
                            <li>像素：1000-1600万</li>
                            <li>机身内存：64GB</li>
                        </ul>
                        <div class="intro-detail">
                            <img src="@/assets/ShopCarAbout/intro01.png" />
                            <img src="@/assets/ShopCarAbout/intro02.png" />
                            <img src="@/assets/ShopCarAbout/intro03.png" />
                        </div>
                    </div>
                    <div id="two" class="tab-pane">
                        <p>规格与包装</p>
                    </div>
                    <div id="three" class="tab-pane">
                        <p>售后保障</p>
                    </div>
                    <div id="four" class="tab-pane">
                        <p>商品评价</p>
                    </div>
                    <div id="five" class="tab-pane">
                        <p>手机社区</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>

<script lang='ts'>
import { defineComponent, defineAsyncComponent, ref, onMounted, toRefs, watch, toRaw, provide } from 'vue'
import { mapState } from 'pinia'
import { store } from '@/Pstore/store'
import { ElNotification } from 'element-plus'
import { debounce } from 'ts-debounce-throttle'
import { useRouter } from 'vue-router'
import { getUserName } from '@/tools/local'

const Carousel = defineAsyncComponent(() => import('@/components/Carousel/Carousel.vue'))
const detailStore = store()
export default defineComponent({
    name: 'Detail',
    setup() {
        const attrStore = store()
        const attrNum = ref<number | string>(1)
        const { spuSaleAttrList, skuInfo } = toRefs(attrStore)
        const greenEvent = ref<HTMLElement | null>(null)
        const bigPhoto = ref<HTMLElement | null>(null)
        const router = useRouter()
        function setBigImgUrl(url: string) {
            if (detailStore.itemData && detailStore.itemData.skuInfo.skuDefaultImg) {
                detailStore.setDefultImg(url)
            } else {
                ElNotification.error({
                    title: '出错啦',
                    message: '请检查连接是否正确' + url
                })
            }
        }
        function mouseZoom(events: MouseEvent) {
            if (greenEvent.value !== null && bigPhoto.value !== null) {
                let offerX: string = '0px', offerY: string = "0px"
                let Xkey: boolean = true, Ykey: boolean = true
                if (events.offsetY <= 100 || events.offsetY >= 300 || events.offsetX <= 100 || events.offsetX >= 300) {
                    if (events.offsetY <= 100 || events.offsetY >= 300) {
                        if (events.offsetY <= 100) {
                            offerY = "0px"
                        } else if (events.offsetY >= 300) {
                            offerY = "200px"
                        }
                        Ykey = false
                    }
                    if (events.offsetX <= 100 || events.offsetX >= 300) {
                        if (events.offsetX <= 100) {
                            offerX = "0px"
                        } else if (events.offsetX >= 300) {
                            offerX = "200px"
                        }
                        Xkey = false
                    }
                }
                if (Ykey) offerY = `${events.offsetY - 100}px`
                if (Xkey) offerX = `${events.offsetX - 100}px`
                bigPhoto.value.style.top = `${-parseInt(offerY) * 2}px`
                bigPhoto.value.style.left = `${-parseInt(offerX) * 2}px`
                greenEvent.value.style.top = offerY
                greenEvent.value.style.left = offerX
            }
        }
        function filterAttr(value: string, BigIndex: number, MiniIndex: number) {
            if (spuSaleAttrList.value) {
                let result = (spuSaleAttrList.value as { spuSaleAttrValueList: { isChecked: string }[] }[])[BigIndex].spuSaleAttrValueList;
                result.forEach((result: { isChecked: string }) => {
                    result.isChecked = '0'
                })
                result[MiniIndex].isChecked = '1'
            }
            console.log(value, BigIndex, MiniIndex)
        }
        function upAttrNum(isUp: boolean) {
            if (typeof attrNum.value === 'number') {
                if (isUp) {
                    attrNum.value++
                } else if (attrNum.value > 1) {
                    attrNum.value--
                }
            }
        }
        async function getPushAttr() {
            if (skuInfo.value && typeof attrNum.value === 'number' && !isNaN(attrNum.value)) {
                const result = await attrStore.geiPushMark(toRaw((skuInfo.value as { id: number }).id), toRaw(attrNum.value))
                if (result && getUserName()) {
                    ElNotification.success({
                        title: '加入成功',
                        message: '请检查购物车'
                    })
                    const { skuDefaultImg, skuName } = skuInfo.value as { skuDefaultImg: string, skuName: string }
                    router.push({
                        name: 'success',
                        query: {
                            skuDefaultImg, skuName, num: attrNum.value
                        }
                    })
                } else {
                    ElNotification.error({
                        title: '出现错误了',
                        message: '请检查网路和账号是否处于登录状态'
                    })
                }
            }
        }
        onMounted(() => {
            greenEvent.value = document.getElementById('Greentevent') as HTMLDivElement
            bigPhoto.value = document.getElementById('big') as HTMLDivElement
            greenEvent.value.style.top = '0px'
            greenEvent.value.style.left = '0px'
            bigPhoto.value.style.top = '0px'
            bigPhoto.value.style.left = '0px'
        })
        watch(attrNum, debounce((newValue: string | number) => {
            if (typeof newValue == 'string') {
                if (!isNaN(parseInt(newValue)) && parseInt(newValue) > 1) {
                    attrNum.value = parseInt(newValue)
                    return
                }
            } else if (attrNum.value > 1) {
                attrNum.value = newValue
                return
            }
            attrNum.value = 1
        }, 1000))
        return {
            setBigImgUrl, mouseZoom, filterAttr, attrNum, upAttrNum, getPushAttr
        }
    },
    computed: {
        ...mapState(store, ['itemData', 'categoryView', 'itemData', 'skuInfo', 'spuSaleAttrList'])
    },
    components: { Carousel }
})
</script>
<style scoped lang="less">
.isCheckedNow {
    color: red !important;
}
.toolbar {
    position: fixed;
    z-index: 999;
    width: 300px;
    height: 100%;
    background-color: #7a6e6e;
    transition: right 0.3s ease-in-out 0s;
    &.toolbar-out {
        top: 0px;
        right: 0px;
    }
    &.toolbar-wrap {
        top: 0px;
        right: -294px;
    }
    .content {
        position: relative;
        left: 6px;
        width: 294px;
        background-color: bisque;
        height: 100%;
        z-index: 99;
    }
    .but {
        position: relative;
        width: 35px;
        height: 35px;
        line-height: 35px;
        text-align: center;
        margin-bottom: 1px;
        cursor: pointer;
        background-color: #7a6e6e;
        border-radius: 3px 0 0 3px;
        position: absolute;
        top: 0;
        /*right: -6px;*/
        left: -29px;
        &.list {
            background-image: url("@/assets/ShopCarAbout/list.png");
            background-repeat: no-repeat;
            background-size: cover;
        }
        &.pull-wrap {
            background-image: url("@/assets/ShopCarAbout/cross.png");
            background-repeat: no-repeat;
            background-size: cover;
        }
    }
    .toolist {
        position: absolute;
        top: 50%;
        left: -29px;
        width: 35px;
        margin-top: -80px;
        /*background-color: cadetblue;*/
        .pull {
            position: relative;
            width: 35px;
            height: 35px;
            line-height: 35px;
            text-align: center;
            margin-bottom: 1px;
            cursor: pointer;
            background-color: #7a6e6e;
            border-radius: 3px 0 0 3px;
            z-index: 66;
            .vip {
                background-image: url("@/assets/ShopCarAbout/toolbars.png");
                background-position: -88px -175px;
            }
            .cart {
                background-image: url("@/assets/ShopCarAbout/toolbars.png");
                background-position: -50px 0;
            }
            .follow {
                background-image: url("@/assets/ShopCarAbout/toolbars.png");
                background-position: -50px -50px;
            }
            .history {
                background-image: url("@/assets/ShopCarAbout/toolbars.png");
                background-position: -50px -100px;
            }
            .message {
                background-image: url("@/assets/ShopCarAbout/toolbars.png");
                background-position: -190px -150px;
            }
            .jimi {
                background-image: url("@/assets/ShopCarAbout/toolbars.png");
                background-position: -50px -150px;
            }
            .top {
                background-image: url("@/assets/ShopCarAbout/toolbars.png");
                background-position: -50px -250px;
            }

            .tab-text {
                width: 62px;
                height: 35px;
                line-height: 35px;
                color: #fff;
                text-align: center;
                font-family: 微软雅黑;
                position: absolute;
                /*position: relative;*/
                z-index: 1;
                left: 35px;
                top: 0;
                background-color: #7a6e6e;
                border-radius: 3px 0 0 3px;
                font-style: normal;
                -webkit-transition: left 0.3s ease-in-out 0.1s;
                transition: left 0.3s ease-in-out 0.1s;
            }
            .tab-ico {
                display: inline-block;
                position: relative;
                /*background-image: url(img/toolbars.png);*/
                background-color: #7a6e6e;
                border-radius: 3px 0 0 3px;
                z-index: 2;
                width: 35px;
                height: 35px;
            }
        }
    }

    & > .pull {
        position: relative;
        width: 35px;
        height: 35px;
        line-height: 35px;
        text-align: center;
        margin-bottom: 1px;
        cursor: pointer;
        background-color: #7a6e6e;
        border-radius: 3px 0 0 3px;
        z-index: 66;
        .tab-ico {
            display: inline-block;
            position: relative;
            /*background-image: url(img/toolbars.png);*/
            background-color: #7a6e6e;
            border-radius: 3px 0 0 3px;
            z-index: 2;
            width: 35px;
            height: 35px;
        }
        .top {
            background-image: url("@/assets/ShopCarAbout/toolbars.png");
            background-position: -50px -250px;
        }

        .tab-text {
            width: 62px;
            height: 35px;
            line-height: 35px;
            color: #fff;
            text-align: center;
            font-family: 微软雅黑;
            position: absolute;
            /*position: relative;*/
            z-index: 1;
            left: 35px;
            top: 0;
            background-color: #7a6e6e;
            border-radius: 3px 0 0 3px;
            font-style: normal;
            -webkit-transition: left 0.3s ease-in-out 0.1s;
            transition: left 0.3s ease-in-out 0.1s;
        }
    }
    & > .back {
        position: absolute;
        bottom: 0;
        /*right: -6px;*/
        left: -29px;
        display: inline-block;
        background-image: url("@/assets/ShopCarAbout/toolbars.png");
    }
}
.con {
    width: 1200px;
    margin: 15px auto 0;
    .conPoin {
        padding: 9px 15px 9px 0;
        & > a + a:before {
            content: "/\00a0";
            padding: 0 5px;
            color: #ccc;
        }
    }
    .mainCon {
        overflow: hidden;
        margin: 5px 0 15px;
        .previewWrap {
            float: left;
            width: 400px;
            position: relative;
            .preview {
                width: 400px;
                height: 400px;
                border: 1px solid #dfdfdf;
                .jqzoom {
                    cursor: pointer;
                    width: 400px;
                    height: 400px;
                    position: relative;
                    img {
                        width: 100%;
                    }
                    .mask {
                        width: 200px;
                        height: 200px;
                        background: rgba(255, 255, 255, 0.5);
                        position: absolute;
                        left: 0;
                        top: 0;
                        border: 1px solid #ddd;
                    }
                }
                .maxbox {
                    width: 400px;
                    height: 400px;
                    position: absolute;
                    left: 420px;
                    top: 0px;
                    overflow: hidden;
                    z-index: 20;
                    border: 1px solid #ddd;
                    img {
                        width: 800px;
                        height: 800px;
                        display: block;
                    }
                }
            }
            .specScroll {
                margin-top: 5px;
                width: 400px;
                overflow: hidden;
                .prev,
                .next {
                    text-align: center;
                    width: 10px;
                    height: 54px;
                    line-height: 54px;
                    border: 1px solid #ccc;
                    background: #ebebeb;
                    cursor: pointer;
                }
                .prev {
                    float: left;
                    margin-right: 4px;
                }
                .next {
                    float: right;
                }
                .items {
                    float: left;
                    position: relative;
                    width: 400px;
                    height: 56px;
                    overflow: hidden;
                    .itemsCon {
                        position: absolute;
                        width: 400px;
                        height: 56px;
                        left: 0;
                        img {
                            float: left;
                            text-align: center;
                            border: 1px solid #ccc;
                            padding: 2px;
                            width: 50px;
                            height: 50px;
                            margin-right: 20px;
                        }
                    }
                }
            }
        }
        .InfoWrap {
            width: 700px;
            float: right;
            .InfoName {
                font-size: 14px;
                line-height: 21px;
                margin-top: 15px;
            }
            .news {
                color: #e12228;
                margin-top: 15px;
            }
            .priceArea {
                background: #fee9eb;
                padding: 7px;
                margin: 13px 0;
                .priceArea1 {
                    overflow: hidden;
                    line-height: 28px;
                    margin-top: 10px;
                    .title {
                        float: left;
                        margin-right: 15px;
                    }
                    .price {
                        float: left;
                        color: #c81623;
                        i {
                            font-size: 16px;
                        }
                        em {
                            font-size: 24px;
                            font-weight: 700;
                        }
                        span {
                            font-size: 12px;
                        }
                    }
                    .remark {
                        float: right;
                    }
                }
                .priceArea2 {
                    overflow: hidden;
                    line-height: 28px;
                    margin-top: 10px;
                    .title {
                        margin-right: 15px;
                        float: left;
                    }
                    .fixWidth {
                        width: 520px;
                        float: left;
                        .red-bg {
                            background: #c81623;
                            color: #fff;
                            padding: 3px;
                        }
                        .t-gray {
                            color: #999;
                        }
                    }
                }
            }
            .support {
                border-bottom: 1px solid #ededed;
                padding-bottom: 5px;
                .supportArea {
                    overflow: hidden;
                    line-height: 28px;
                    margin-top: 10px;
                    .title {
                        margin-right: 15px;
                        float: left;
                    }
                    .fixWidth {
                        width: 520px;
                        float: left;
                        color: #999;
                    }
                }
            }
            .choose {
                .chooseArea {
                    overflow: hidden;
                    line-height: 28px;
                    margin-top: 10px;
                    .choosed {
                        mark {
                            height: 30px;
                            display: inline-block;
                            line-height: 30px;
                            background-color: snow;
                            border: 1px solid #ddd;
                            padding: 0 20px;
                            margin-right: 20px;
                            a {
                                font-size: 12px;
                                color: red;
                                margin-left: 20px;
                                cursor: pointer;
                            }
                        }
                    }
                    dl {
                        overflow: hidden;
                        margin: 13px 0;
                        dt {
                            margin-right: 15px;
                            float: left;
                        }
                        dd {
                            float: left;
                            margin-right: 5px;
                            color: #666;
                            line-height: 24px;
                            padding: 2px 14px;
                            border-top: 1px solid #eee;
                            border-right: 1px solid #bbb;
                            border-bottom: 1px solid #bbb;
                            border-left: 1px solid #eee;
                        }
                    }
                }
                .cartWrap {
                    .controls {
                        width: 48px;
                        position: relative;
                        float: left;
                        margin-right: 15px;
                        .itxt {
                            width: 38px;
                            height: 37px;
                            border: 1px solid #ddd;
                            color: #555;
                            float: left;
                            border-right: 0;
                            text-align: center;
                        }
                        .plus,
                        .mins {
                            width: 15px;
                            text-align: center;
                            height: 17px;
                            line-height: 17px;
                            background: #f1f1f1;
                            color: #666;
                            position: absolute;
                            right: -8px;
                            border: 1px solid #ccc;
                        }
                        .mins {
                            right: -8px;
                            top: 19px;
                            border-top: 0;
                        }
                        .plus {
                            right: -8px;
                        }
                    }
                    .add {
                        float: left;
                        a {
                            background-color: #e1251b;
                            padding: 0 25px;
                            font-size: 16px;
                            color: #fff;
                            height: 36px;
                            line-height: 36px;
                            display: block;
                        }
                    }
                }
            }
        }
    }
}
.productDetail {
    width: 1200px;
    margin: 30px auto 0;
    overflow: hidden;
    .aside {
        width: 210px;
        float: left;
        border: 1px solid #ccc;
        .tabWraped {
            height: 40px;
            h4 {
                border-top: 3px solid #fff;
                float: left;
                line-height: 37px;
                width: 105px;
                text-align: center;
                border-bottom: 1px solid #ccc;
                &.active {
                    border-top: 3px solid #e1251b;
                    border-bottom: 0;
                    font-weight: normal;
                }
            }
        }
        .tabContent {
            padding: 10px;
            .tab-pane {
                display: none;
                &.active {
                    display: block;
                }
                &:nth-child(1) {
                    .partList {
                        overflow: hidden;
                        li {
                            width: 50%;
                            float: left;
                            border-bottom: 1px dashed #ededed;
                            line-height: 28px;
                        }
                    }
                    .goodsList {
                        & > li {
                            margin: 5px 0 15px;
                            border-bottom: 1px solid #ededed;
                            padding-bottom: 5px;
                            .list-wrap {
                                .p-img {
                                    text-align: center;
                                    img {
                                        width: 152px;
                                    }
                                }
                                .price {
                                    font-size: 16px;
                                    color: #c81623;
                                }
                                .operate {
                                    text-align: center;
                                    margin: 5px 0;
                                    a {
                                        background-color: transparent;
                                        border: 1px solid #8c8c8c;
                                        color: #8c8c8c;
                                        display: inline-block;
                                        padding: 2px 14px;
                                        line-height: 18px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .detail {
        width: 980px;
        float: right;
        .fitting {
            border: 1px solid #ddd;
            margin-bottom: 15px;
            .kt {
                border-bottom: 1px solid #ddd;
                background: #f1f1f1;
                color: #333;
                padding: 5px 0 5px 15px;
            }
            .good-suits {
                height: 170px;
                padding-top: 10px;
                .master {
                    width: 127px;
                    height: 165px;
                    text-align: center;
                    position: relative;
                    float: left;
                    img {
                        width: 87px;
                    }
                    p {
                        color: #c81623;
                        font-size: 16px;
                        font-weight: 700;
                    }
                    i {
                        position: absolute;
                        top: 48px;
                        right: -25px;
                        font-size: 16px;
                    }
                }
                .suits {
                    width: 668px;
                    height: 165px;
                    float: left;
                    .suitsItem {
                        float: left;
                        width: 127px;
                        padding: 0 20px;
                        text-align: center;
                        img {
                            width: 120px;
                            height: 130px;
                        }
                        p {
                            font-size: 12px;
                        }
                        label {
                            display: block;
                            position: relative;
                            input {
                                vertical-align: middle;
                            }
                            span {
                                vertical-align: middle;
                            }
                        }
                    }
                }
                .result {
                    border-left: 1px solid #ddd;
                    width: 153px;
                    height: 165px;
                    padding-left: 20px;
                    float: left;
                    .num {
                        font-size: 14px;
                        margin-bottom: 10px;
                        margin-top: 10px;
                    }
                    .price-tit {
                        font-weight: bold;
                        margin-bottom: 10px;
                    }
                    .price {
                        color: #b1191a;
                        font-size: 16px;
                        margin-bottom: 10px;
                    }
                    .addshopcar {
                        background-color: #e1251b;
                        border: 1px solid #e1251b;
                        padding: 10px 25px;
                        font-size: 16px;
                        color: #fff;
                        display: inline-block;
                        box-sizing: border-box;
                    }
                }
            }
        }
        .intro {
            .tab-wraped {
                background: #ededed;
                // border: 1px solid #ddd;
                overflow: hidden;
                li {
                    float: left;
                    & + li > a {
                        border-left: 1px solid #ddd;
                    }
                    &.active {
                        a {
                            // border: 0;
                            background: #e1251b;
                            color: #fff;
                        }
                    }
                    a {
                        display: block;
                        height: 40px;
                        line-height: 40px;
                        padding: 0 11px;
                        text-align: center;
                        color: #666;
                        background: #fcfcfc;
                        border-top: 1px solid #ddd;
                        border-bottom: 1px solid #ddd;
                    }
                }
            }
            .tab-content {
                .tab-pane {
                    display: none;
                    &.active {
                        display: block;
                    }
                    &:nth-child(1) {
                        .goods-intro {
                            padding-left: 10px;
                            li {
                                margin: 10px 0;
                            }
                        }
                        .intro-detail {
                            img {
                                width: 100%;
                            }
                        }
                    }
                }
            }
        }
    }
}
.like {
    width: 1198px;
    border: 1px solid #ddd;
    margin: 15px auto;
    .kt {
        border-bottom: 1px solid #ddd;
        background: #f1f1f1;
        color: #333;
        margin: 0;
        padding: 5px 10px;
    }
    .like-list {
        padding: 15px 11px;
        overflow: hidden;
        .likeItem {
            width: 196px;
            float: left;
            .p-img {
                text-align: center;
                img {
                    width: 167px;
                    height: 123px;
                }
            }
            .attr {
                padding: 0 15px;
            }
            .price {
                padding: 0 15px;
                font-size: 16px;
                color: #c81623;
                margin-bottom: 20px;
            }
            .commit {
                padding: 0 15px;
            }
        }
    }
}

.spec-preview {
    position: relative;
    width: 400px;
    height: 400px;
    border: 1px solid #ccc;
    float: left;
    img {
        width: 100%;
        height: 100%;
    }

    .event {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 998;
    }

    .mask {
        width: 50%;
        height: 50%;
        background-color: rgba(0, 255, 0, 0.3);
        position: absolute;
        left: 0;
        top: 0;
        display: none;
    }

    .big {
        width: 100%;
        height: 100%;
        position: absolute;
        top: -1px;
        left: 100%;
        border: 1px solid #aaa;
        overflow: hidden;
        z-index: 998;
        display: none;
        background: white;

        img {
            width: 200%;
            max-width: 200%;
            height: 200%;
            position: absolute;
            left: 0;
            top: 0;
        }
    }

    .event:hover ~ .mask,
    .event:hover ~ .big {
        display: block;
    }
}
</style>